@import "variables";


.ss-platform {

  // tools
  &-pointer {cursor: pointer}
  &-container:after,
  &-container:before {display: table;content: " ";clear: both}
  &-readonly {
    &, &:focus, &.ss-platform-input:focus {outline: none !important;background-color: #fff !important;user-select: none}
  }
  &-pull {
    &-left {float: left}
    &-right {float: right}
  }
  &-w100 {width: 100%}
  &-fwb {font-weight: bold !important;}
  &-no-data {height: 100px !important;line-height: 100px !important;text-align: center; /*color: #999;*/
    font-size: 14px;letter-spacing: 5px;color: #333;}
  &-no-select {user-select: none}
  &-text-ellipsis {text-overflow: ellipsis;overflow: hidden;white-space: nowrap}
  &-text-center {text-align: center !important;}

  // border width position radius
  .ss-platform-b {
    &w0 {border-width: 0px !important}
    &wl0 {border-left: 0px;}
    &r0 {border-radius: 0 !important;}
  }

  // padding
  &-p {
    &0 {padding: 0px !important;}
    &5 {padding: 5px !important;}
    &8 {padding: 8px !important;}
    &10 {padding: 10px !important;}
    &15 {padding: 15px !important;}
    &20 {padding: 20px !important;}
    &40 {padding: 40px !important;}
    &t0 {padding-top: 0px !important}
    &r0 {padding-right: 0px !important}
    &b0 {padding-bottom: 0px !important}
    &l0 {padding-left: 0px !important}
    &t5 {padding-top: 5px !important}
    &r5 {padding-right: 5px !important}
    &b5 {padding-bottom: 5px !important}
    &l5 {padding-left: 5px !important}
    &t8 {padding-top: 8px !important}
    &r8 {padding-right: 8px !important}
    &b8 {padding-bottom: 8px !important}
    &l8 {padding-left: 8px !important}
    &t10 {padding-top: 10px !important}
    &r10 {padding-right: 10px !important}
    &b10 {padding-bottom: 10px !important}
    &l10 {padding-left: 10px !important}
    &t12 {padding-top: 12px !important}
    &r12 {padding-right: 12px !important}
    &b12 {padding-bottom: 12px !important}
    &l12 {padding-left: 12px !important}
    &t15 {padding-top: 15px !important}
    &r15 {padding-right: 15px !important}
    &b15 {padding-bottom: 15px !important}
    &l15 {padding-left: 15px !important}
    &t20 {padding-top: 20px !important}
    &r20 {padding-right: 20px !important}
    &b20 {padding-bottom: 20px !important}
    &l20 {padding-left: 20px !important}
    &t30 {padding-top: 30px !important}
    &r30 {padding-right: 30px !important}
    &b30 {padding-bottom: 30px !important}
    &l30 {padding-left: 30px !important}
    &t40 {padding-top: 40px !important}
    &r40 {padding-right: 40px !important}
    &b40 {padding-bottom: 40px !important}
    &l40 {padding-left: 40px !important}
    &t45 {padding-top: 45px !important}
    &r45 {padding-right: 45px !important}
    &b45 {padding-bottom: 45px !important}
    &l45 {padding-left: 45px !important}
    &t50 {padding-top: 50px !important}
    &r50 {padding-right: 50px !important}
    &b50 {padding-bottom: 50px !important}
    &l50 {padding-left: 50px !important}
    &t60 {padding-top: 60px !important}
    &r60 {padding-right: 60px !important}
    &b60 {padding-bottom: 60px !important}
    &l60 {padding-left: 60px !important}
    &t80 {padding-top: 80px !important}
    &r80 {padding-right: 80px !important}
    &b80 {padding-bottom: 80px !important}
    &l80 {padding-left: 80px !important}
    &t100 {padding-top: 100px !important}
    &r100 {padding-right: 100px !important}
    &b100 {padding-bottom: 100px !important}
    &l100 {padding-left: 100px !important}
  }

  // margin
  &-m {
    &0 {margin: 0px !important;}
    &t0 {margin-top: 0px !important}
    &r0 {margin-right: 0px !important}
    &b0 {margin-bottom: 0px !important}
    &l0 {margin-left: 0px !important}
    &t5 {margin-top: 5px !important}
    &r5 {margin-right: 5px !important}
    &b5 {margin-bottom: 5px !important}
    &l5 {margin-left: 5px !important}
    &t8 {margin-top: 8px !important}
    &r8 {margin-right: 8px !important}
    &b8 {margin-bottom: 8px !important}
    &l8 {margin-left: 8px !important}
    &t9 {margin-top: 9px !important}
    &r9 {margin-right: 9px !important}
    &b9 {margin-bottom: 9px !important}
    &l9 {margin-left: 9px !important}
    &t10 {margin-top: 10px !important}
    &r10 {margin-right: 10px !important}
    &b10 {margin-bottom: 10px !important}
    &l10 {margin-left: 10px !important}
    &t11 {margin-top: 11px !important}
    &r11 {margin-right: 11px !important}
    &b11 {margin-bottom: 11px !important}
    &l11 {margin-left: 11px !important}
    &t15 {margin-top: 15px !important}
    &r15 {margin-right: 15px !important}
    &b15 {margin-bottom: 15px !important}
    &l15 {margin-left: 15px !important}
    &t20 {margin-top: 20px !important}
    &r20 {margin-right: 20px !important}
    &b20 {margin-bottom: 20px !important}
    &l20 {margin-left: 20px !important}
    &t25 {margin-top: 25px !important}
    &r25 {margin-right: 25px !important}
    &b25 {margin-bottom: 25px !important}
    &l25 {margin-left: 25px !important}
    &t30 {margin-top: 30px !important}
    &r30 {margin-right: 30px !important}
    &b30 {margin-bottom: 30px !important}
    &l30 {margin-left: 30px !important}
    &t40 {margin-top: 40px !important}
    &r40 {margin-right: 40px !important}
    &b40 {margin-bottom: 40px !important}
    &l40 {margin-left: 40px !important}
    &t45 {margin-top: 45px !important}
    &r45 {margin-right: 45px !important}
    &b45 {margin-bottom: 45px !important}
    &l45 {margin-left: 45px !important}
    &t50 {margin-top: 50px !important}
    &r50 {margin-right: 50px !important}
    &b50 {margin-bottom: 50px !important}
    &l50 {margin-left: 50px !important}
    &t60 {margin-top: 60px !important}
    &r60 {margin-right: 60px !important}
    &b60 {margin-bottom: 60px !important}
    &l60 {margin-left: 60px !important}
    &t80 {margin-top: 80px !important}
    &r80 {margin-right: 80px !important}
    &b80 {margin-bottom: 80px !important}
    &l80 {margin-left: 80px !important}
    &t100 {margin-top: 100px !important}
    &r100 {margin-right: 100px !important}
    &b100 {margin-bottom: 100px !important}
    &l100 {margin-left: 100px !important}
  }

  // line-height
  &-lh {
    &20 {line-height: 20px !important;}
    &22 {line-height: 22px !important;}
    &23 {line-height: 23px !important;}
    &24 {line-height: 24px !important;}
    &32 {line-height: 32px !important;}
    &34 {line-height: 34px !important;}
    &35 {line-height: 35px !important;}
    &36 {line-height: 36px !important;}
    &38 {line-height: 38px !important;}
    &40 {line-height: 40px !important;}
  }

  // text color
  &-text- {
    &warning {color: $color-warning !important}
    &warning:hover {color: $color-warning-hover !important}
    &warning-2 {color: $color-warning-2 !important;}
    &invalid {color: $color-invalid !important}
    &primary {color: $color-primary !important}
    &primary:hover {color: $color-primary-hover !important;}
    &primary-2 {color: $color-primary-2 !important}
    &primary-2:hover {color: $color-primary-hover-2 !important;}
    &black {color: #000 !important;}
    &danger {color: $color-danger !important;}
    &info {color: #333 !important;}
    &black {color: #333 !important;}
    &success {color: $color-success !important}
    &success:hover {color: $color-success-hover !important;}
    &success-2 {color: $color-success-2 !important}
  }

  // font size
  &-fs {
    &18 {font-size: 18px}
    &12 {font-size: 12px}
  }

  // bg color
  &-bg- {
    &white {background: #fff}
    &gray {background: #eaedf1}
    &f3 {background: #f3f3f3}
  }

  // 缩略图
  &-thumbnail {
    float: left;margin-right: 12px;margin-bottom: 12px;max-width: 180px;height: 80px;position: relative;
    img {border: 1px solid #eee;padding: 8px;max-width: 180px;height: 80px;}
    .drop,
    .zoom {position: absolute;left: 10px;bottom: 10px;height: 22px;width: 22px;border-radius: 2px;overflow: hidden;color: #E64E4D;background: #fff;text-align: center;display: none;cursor: pointer;border: 1px solid #ddd}
    .zoom {left: auto;right: 10px;}
    &:hover .drop,
    &:hover .zoom {display: block}
  }

  /* ========= ss-platform-btn */
  &-btn {
    display: inline-block;padding: 0 40px;border: 1px solid #008ed2;background: #008ed2;
    color: #fff;border-radius: 4px;height: 36px;line-height: 36px;text-align: center;font-size: 14px;
    cursor: pointer;box-sizing: border-box;-webkit-box-sizing: border-box;
    &.simple {border: 1px solid #eeecec;background: #fff;color: #4b4b4b}
    &.mini {padding: 0 20px;height: 28px;line-height: 26px;border-radius: 3px;font-size: 12px}

    &-default {
      border: 1px solid #eeecec !important;background: #fff;color: #4b4b4b;
      &:hover {color: #fff !important;background-color: #008ed2 !important;border-color: #008ed2 !important;}
      &:focus {text-decoration: none !important;outline: none !important;}
    }
    &-primary {
      background-color: $color-primary !important;color: #fff !important;border-color: $color-primary !important;
      &:hover, &:focus, &:active, &:hover:active, &:hover:focus, &:active:focus {background-color: $color-primary-hover !important;color: #fff !important;border-color: $color-primary-hover !important;}
    }
    &-success {
      background-color: $color-success !important;color: #fff !important;
      &:hover {background-color: $color-success-hover !important;}
    }
    &-warning {
      background-color: $color-warning !important;color: #fff !important;
      &:hover {background-color: $color-warning-hover !important;}
    }
    &-danger {
      background-color: $color-danger !important;color: #fff !important;border-color: $color-danger !important;
      &:hover, &:focus, &:active, &:hover:active, &:hover:focus, &:active:focus {background-color: $color-danger-hover !important;color: #fff !important;border-color: $color-danger-hover !important;}
    }
    &-gray {background-color: #818c92 !important;color: #fff !important;border-color: #818c92 !important;}
    &-gray:hover {color: #fff !important}

    &-gray2 {
      background-color: #e5e5e5 !important;color: #9f9f9f !important;border-color: #e5e5e5 !important;
      //&:hover{color: #fff!important}
    }
    /*&-default,&-primary,&-success,&-warning,&-danger,&-gray{
      border-radius: 0px!important;outline:none!important;outline-offset: -2px!important;padding: 5px 15px!important;min-width: 80px!important;
    }*/
    &-group {
      & > .btn {
        &.active {
          background-color: #808c92 !important;color: #fff !important;border-color: #808c92 !important;
        }
      }
    }
    &-value-add {
      float: left;display: inline-block;width: 28px;height: 28px;line-height: 28px;text-align: center;border-radius: 3px;
      border: 1px solid #ececec;cursor: pointer;background-color: #fff;
      @include ssicon(1px, pointer);
      &:hover {
        border: 1px solid #008ed2;
        i {
          color: #008ed2
        }
      }
    }
  }

  // input
  &-input {
    text-overflow: ellipsis;overflow: hidden;margin: 0;padding: 6px;width: 100%;line-height: 15px;
    border: 1px solid rgba(0, 0, 0, .2);box-sizing: border-box;color: #4b4b4b;
    background: hsla(0, 0%, 100%, .1);box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);outline: none;font-size: 14px;
    &:focus {
      outline: 1px solid #afc2ec;outline-offset: -1px;z-index: 2; /*border: 1px solid #afc2ec;*/
      color: #4b4b4b
    }
    &::placeholder {color: #999 !important;opacity: 1;}
    &.ss-platform-text-invalid {color: #999 !important;}
    &.mini {}
  }

  // select
  /*&-select {
    background-color: #fff;background-image: url();background-repeat: no-repeat;background-position: 100% 49%;padding: 6px 20px 6px 6px;
    border: 1px solid #d5d5d5;border-radius: 0;box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);width: 100%;line-height: 15px;font-size: 14px;
    box-sizing: border-box;appearance: none;border-radius: 0 !important;
  }
  @media only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    &-select {
      background-image: url();
      background-size: 18px auto
    }
  }*/
  &-radio {
    margin-left: 1px;
  }
  &-checkbox {
    margin-top: -3px;
  }
  &-radio, &-checkbox {
    margin: -2px 5px 1px 1px;padding: 0;vertical-align: middle;
  }
  &-textarea {
    &-wraper {
      padding: 6px;width: 100%;border: 1px solid #d5d5d5;box-sizing: border-box;color: #4b4b4b;
      background: #fff;box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);outline: none;
      textarea {
        margin: 0;padding: 0;border: none;width: 100%;line-height: 160%;box-sizing: border-box;display: block;
      }
      .num {
        height: 14px;line-height: 14px;text-align: right;color: #9f9f9f;
        &.warning {color: #cf5c60;}
      }
    }
  }

  &-choose-list {
    list-style: none;
    > li {
      float: left;padding-right: 10px;width: 25%;height: 30px;
      line-height: 30px;overflow: hidden;display: block;white-space: nowrap;text-overflow: ellipsis;box-sizing: border-box;
      label {
        cursor: pointer;
        a, a:hover {margin-left: 10px;color: #008ed2 !important}
        em {color: #9f9f9f}
        span + em {margin-left: 5px}
      }
    }
  }

  &-user-list {
    list-style: none;
    li {
      float: left;margin: 0 6px 15px 0;position: relative;
      &.invited span {opacity: .5}
      .user {
        display: block;height: 20px;line-height: 20px;
        span {
          width: 46px;height: 20px;overflow: hidden;display: inline-block;
          margin-left: 5px;font-size: 12px;cursor: pointer;white-space: nowrap;text-overflow: ellipsis;
        }
        &.middle span {width: 50px;height: 32px}
        &.large span {width: 50px;height: 48px}
        &.super span {width: 50px;height: 128px}
        .avatar {width: 20px;height: 20px;border-radius: 100px;box-shadow: inset 0 0 2px rgb(0 0 0 / 30%);}
      }
      &.more {
      }
      em.drop {
        display: none;position: absolute;right: 0;top: 2px;border: 1px solid #ececec;width: 13px;height: 13px;
        line-height: 13px;background: #fff;text-align: center;border-radius: 100px;cursor: pointer;z-index: 1;
        i {}
      }
      &:hover em.drop {
        display: block;
        &:hover {border: 1px solid #9da1c4}
      }
      .del {
        margin-right: -18px;float: right;display: none;
        @include ssicon(1px, pointer);
        i {font-size: 12px;background: #fff;}
      }
      &:hover .del {display: block}
    }
  }
}

.clearfix {
  zoom: 1;
  &:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}
}

// color
.color {
  &-a {color: #42a5f5;border: 1px solid #42a5f5;background-color: #42a5f5;
    &.lighten {background-color: #f6fafe}
  }
  &-b {color: #66bb6a;border: 1px solid #66bb6a;background-color: #66bb6a;
    &.lighten {background-color: #f7fbf7}
  }
  &-c {color: #ef5350;border: 1px solid #ef5350;background-color: #ef5350;
    &.lighten {background-color: #fef6f6}
  }
  &-d {color: #26a69a;border: 1px solid #26a69a;background-color: #26a69a;
    &.lighten {background-color: #f4fafa}
  }
  &-e {color: #9ccc65;border: 1px solid #9ccc65;background-color: #9ccc65;
    &.lighten {background-color: #f7fbf3}
  }
  &-f {color: #ffa726;border: 1px solid #ffa726;background-color: #ffa726;
    &.lighten {background-color: #fffaf4}
  }
  &-g {color: #ec407a;border: 1px solid #ec407a;background-color: #ec407a;
    &.lighten {background-color: #fef5f8}
  }
  &-h {color: #29b6f6;border: 1px solid #29b6f6;background-color: #29b6f6;
    &.lighten {background-color: #f4fbfe}
  }
  &-i {color: #5c6bc0;border: 1px solid #5c6bc0;background-color: #5c6bc0;
    &.lighten {background-color: #f7f7fc}
  }
  &-j {color: #afaeb0;border: 1px solid #afaeb0;background-color: #afaeb0;
    &.lighten {background-color: #f7f6f7}
  }
  &-k {color: #ff7043;border: 1px solid #ff7043;background-color: #ff7043;
    &.lighten {background-color: #fff8f5}
  }
  &-l {color: #ab47bc;border: 1px solid #ab47bc;background-color: #ab47bc;
    &.lighten {background-color: #fbf5fb}
  }
  &-m {color: #26c6da;border: 1px solid #26c6da;background-color: #26c6da;
    &.lighten {background-color: #f4fcfd}
  }
  &-n {color: #c4d330;border: 1px solid #c4d330;background-color: #c4d330;
    &.lighten {background-color: #f9faeb}
  }
  &-o {color: #ffca28;border: 1px solid #ffca28;background-color: #ffca28;
    &.lighten {background-color: #fffbef}
  }
  &-p {color: #f2da04;border: 1px solid #f2da04;background-color: #f2da04;
    &.lighten {background-color: #fdfbe9}
  }
  &-z {color: #008ed2;border: 1px solid #008ed2;background-color: #008ed2;
    &.lighten {}
  }
  &-orange, &-orange:hover {
    color: #ff8509 !important
  }
  &-red, &-red:hover {
    color: #e53c42 !important
  }
  &-gray, &-gray:hover {
    color: #9f9f9f !important
  }
  &-green, &-green:hover {
    color: #109c3f !important
  }
  &-black, &-black:hover {
    color: #4b4b4b !important
  }
}

// error
button.ss-platform-error,
input.ss-platform-error,
input.ss-platform-error:focus,
div.ss-platform-input.ss-platform-error {outline: 2px solid #E64E4D !important;outline-offset: -1px !important;}
.ss-platform-error {
  > .ss-platform-dropdown .ss-platform-dropdown-title,
  > .ss-platform-dropdown .ss-platform-dropdown-text {outline: 2px solid #E64E4D !important;outline-offset: -2px;}
  &.ss-platform-require .ss-platform-dropdown {
    //background:url(../img/common/icon/require.png) no-repeat right 3px top 3px;
  }
  .ss-platform-error-border {border: 2px solid #E64E4D !important}
}


.appcolor {
  border: none !important;background-color: transparent !important;text-align: center;
  font-weight: 400 !important;text-decoration: none !important;-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;-webkit-text-stroke-width: .22px;font-family: ssicon;color: #9da1c4
}
@media only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .appcolor {
    -webkit-text-stroke-width: .1px
  }
}
.appcolor-o {
  border-radius: 100px;-webkit-border-radius: 100px;-moz-border-radius: 100px;background-color: transparent !important;
  font-weight: 400 !important;text-decoration: none !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
  -webkit-text-stroke-width: .22px;font-family: ssapp;text-align: center
}

@media only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .appcolor-o {-webkit-text-stroke-width: .1px}
}

.ss-appicon {
  display: inline-block;text-align: center;position: relative;
  span {
    float: left;font-size: 12px;word-break: break-all;
  }
  i {
    float: left;font-size: 16px;width: 16px;height: 16px;line-height: 16px;text-align: center;
    &.appcolor-o, &.appcolor-s {
      background: #fff;display: block;margin: 0 auto;width: 40px;height: 40px;line-height: 40px;font-size: 24px;
    }
  }
}


